<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Orchest</title>

    <!-- External dependencies -->
    <link
      rel="stylesheet"
      href="public/css/dist/main.css?v={{ css_bundle_hash }}"
    />
    <link rel="icon" href="public/image/favicon.png" type="image/x-icon" />
  </head>
  <body>
    <script>
      window.ORCHEST_CONFIG = {{config_json|tojson}};
    </script>

    <aside class="mdc-drawer mdc-drawer--dismissible" id="main-drawer">
      <div class="mdc-drawer__content">
        <nav class="mdc-list">
          <a
            class="mdc-list-item mdc-list-item--activated"
            data-react-view="ProjectsView"
            href="#"
          >
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true"
              >format_list_bulleted</i
            >
            <span class="mdc-list-item__text">Projects</span>
          </a>
          <a class="mdc-list-item" data-react-view="PipelinesView" href="#">
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true"
              >device_hub</i
            >
            <span class="mdc-list-item__text">Pipelines</span>
          </a>
          <a class="mdc-list-item" data-react-view="JobsView" href="#">
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true"
              >pending_actions</i
            >
            <span class="mdc-list-item__text">Jobs</span>
          </a>
          <a class="mdc-list-item" data-react-view="EnvironmentsView" href="#">
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true"
              >view_comfy</i
            >
            <span class="mdc-list-item__text">Environments</span>
          </a>
          <a class="mdc-list-item" data-react-view="FileManagerView" href="#">
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true"
              >folder_open</i
            >
            <span class="mdc-list-item__text">File manager</span>
          </a>
          <li role="separator" class="mdc-list-divider"></li>
          <a class="mdc-list-item" data-react-view="SettingsView" href="#">
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true"
              >settings</i
            >
            <span class="mdc-list-item__text">Settings</span>
          </a>
          {% if user_config['AUTH_ENABLED'] %}
          <a class="mdc-list-item" href="/login/clear">
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true"
              >account_circle</i
            >
            <span class="mdc-list-item__text">Logout</span>
          </a>
          {% endif %}
          <a class="mdc-list-item" data-react-view="HelpView" href="#">
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true"
              >help</i
            >
            <span class="mdc-list-item__text">Help</span>
          </a>
        </nav>
        <h1 class="logo"><img src="public/image/logo.png" width="60%" /></h1>
      </div>
    </aside>

    <div class="mdc-drawer-app-content">
      <header class="mdc-top-app-bar app-bar" id="app-bar">
        <div class="mdc-top-app-bar__row">
          <section
            class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"
          >
            <button
              class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button"
            >
              menu
            </button>
            <div class="header-bar-interactive"></div>
          </section>
        </div>
      </header>

      <main class="main-content" id="main-content">
        <div class="mdc-top-app-bar--fixed-adjust">
          <div class="react-view-root"></div>
          <div class="persistent-view jupyter hidden"></div>
        </div>
      </main>
    </div>

    <div class="dialogs"></div>

    {% block content %} {% endblock %}

    <script
      type="module"
      src="public/js/dist/main.bundle.js?v={{ javascript_bundle_hash }}"
    ></script>
  </body>
</html>
